<%@ page contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <!--引入外部文件  -->
    <%@include file="/WEB-INF/head.jsp" %>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/product.js"></script>
</head>
<body>
<!--做添加的框    closed: true 一开始这个框是关闭的状态-->
<div id="editDlg" class="easyui-dialog" title="My Dialog" style="padding:10px"
     data-options="iconCls:'icon-save',resizable:true,modal:true,closed: true, shadow:false">
    <form id="addForm" method="post" enctype="multipart/form-data">
        <!--使用隐藏域防止数据丢失  -->
        <input type="hidden" name="id" id="productId"/>
        <table cellpadding="5">
            <tr>
                <td>商品名字:</td>
                <td><input class="easyui-validatebox" id="name"
                           name="name" type="text" data-options="required:true"/></td>
            </tr>
<%--            <tr>--%>
<%--                <td>颜色:</td>--%>
<%--                <td><input class="easyui-validatebox"--%>
<%--                           type="text" name="color" id="color"--%>
<%--                           data-options="required:true,validType:'color'"/></td>--%>
<%--            </tr>--%>
            <tr>
                <td>图片:</td>
                <td><input class="easyui-validatebox"
                           id="pic" name="file"
                           type="file"/>
                    <input class="easyui-validatebox"
                           id="smallpic" name="smallpic"
                           type="text" hidden="true"/></td>
            </tr>
            <tr>
                <td>进价：</td>
                <td><input class="easyui-validatebox"
                           id="costPrice" name="costprice"
                           type="text" data-options="required:true"/></td>
            </tr>
            <tr>
                <td>售价:</td>
                <td><input class="easyui-validatebox" id="salePrice" name="saleprice" data-options="required:true"/>
                </td>
            </tr>
            <tr>
                <td>商品类型:</td>
                <td>
                    <input id="cc1" class="easyui-combobox" name="typesId"
                           data-options="panelHeight:'auto',valueField:'id',textField:'name',
	   				 	url:'/productType/selectAll'"/>
                </td>
            </tr>
            <tr>
                <td>商品单位:</td>
                <td>
                    <input id="cc2" class="easyui-combobox" name="unitId"
                           data-options="panelHeight:'auto',valueField:'id',textField:'name',
	   				 	url:'/systemDictionaryDetail/selectAllUnit'"/>
                </td>
            </tr>
            <tr>
                <td>商品品牌:</td>
                <td>
                    <input id="cc3" class="easyui-combobox" name="brandId"
                           data-options="panelHeight:'auto',valueField:'id',textField:'name',
	   				 	url:'/systemDictionaryDetail/selectAllBrand'"/>
                </td>
            </tr>
        </table>
    </form>
    <div style="text-align:center;padding:5px 0">
        <a href="javascript:void(0)" class="easyui-linkbutton" data-method="save" style="width:80px">Submit</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#editDlg').dialog('close')"
           style="width:80px">Clear</a>
    </div>
</div>

<div id="tb" style="padding:5px;height:auto">
    <div style="margin-bottom:5px">
        <a href="javascript:;" data-method="add" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
        <a href="javascript:;" data-method="edit" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
        <a href="javascript:;" data-method="remove" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
    </div>
    <form action="#" id="searchForm" method="post">
        <div>
            商品名称: <input name="name" class="easyui-textbox" style="width:80px">
<%--            商品颜色: <input name="color" class="easyui-textbox" style="width:80px">--%>
            商品类型: <!-- 应该是从数据库中找的  textField:'name' 需要展示的属性 -->
            <input id="cc4" class="easyui-combobox" name="typesId"
                   data-options="panelHeight:'auto',valueField:'id',textField:'name',url:'/productType/selectAll'"/>
            商品单位: <!-- 应该是从数据库中找的  textField:'name' 需要展示的属性 -->
            <input id="cc5" class="easyui-combobox" name="unitId"
                   data-options="panelHeight:'auto',valueField:'id',textField:'name',url:'/systemDictionaryDetail/selectAllUnit'"/>
            商品品牌: <!-- 应该是从数据库中找的  textField:'name' 需要展示的属性 -->
            <input id="cc6" class="easyui-combobox" name="brandId"
                   data-options="panelHeight:'auto',valueField:'id',textField:'name',url:'/systemDictionaryDetail/selectAllBrand'"/>
            <a href="javascript:;" data-method="search" class="easyui-linkbutton" iconCls="icon-search">Search</a>
        </div>
    </form>
</div>


<!--pagination:true   显示分页的内容  -->
<table id="productGrid" class="easyui-datagrid" fit="true"
       data-options="
       url:'/product/page',
       fitColumns:true,
       singleSelect:true,
       pagination:true,
       toolbar:'#tb'
    ">
    <thead>
    <tr>
        <th data-options="field:'id'" hidden="true"></th>
        <th data-options="field:'name',width:100">商品名称</th>
<%--        <th data-options="field:'color',width:100">商品颜色</th>--%>
        <th data-options="field:'smallpic',width:100,align:'right',formatter:imageMatter">商品图片</th>
        <th data-options="field:'costprice',width:100,align:'right'">商品进价</th>
        <th data-options="field:'saleprice',width:100,align:'right',">商品售价</th>
        <th data-options="field:'type',width:100,align:'right'">商品类型</th>
        <th data-options="field:'typesId'" hidden="true"></th>
        <th data-options="field:'unit',width:100,align:'right'">商品单位</th>
        <th data-options="field:'unitId'" hidden="true"></th>
        <th data-options="field:'brand',width:100,align:'right'">商品品牌</th>
        <th data-options="field:'brandId'" hidden="true"></th>
    </tr>
    </thead>
</table>


</body>
</html>
